<template>
  <div>
    <button @click="changeBlue()">变蓝色</button>
    <button @click="changeGreen()">变绿色</button>
  </div>
  <div class="con" :style="`color:${color}`">改变区域</div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Content",
  setup() {
    const color = ref("yellow");
    function changeBlue() {
      console.log(this.color);
      color.value = "blue";
    }
    function changeGreen() {
      color.value = "green";
    }
    return {
      color,
      changeBlue,
      changeGreen,
    };
  },
  // onMounted(){
  //   console.log(this)
  // }
};
</script>

<style>
.con {
  width: 500px;
  height: 300px;
  border: 1px solid yellow;
}
</style>